//免费阅读

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:study_flutter/yzhg/project/wx_read/BaseCard.dart';

class CardFree extends BaseCard {
  @override
  _CardFreeState createState() => _CardFreeState();
}

//数据数组
const BOOL_LIST = [
  {"title": "暴力沟通", "cover": "51VykQqGq9L._SY346_.jpg", "price": "19.06"},
  {"title": "论中国", "cover": "41APiBzC41L.jpg", "price": "12.00"},
  {"title": "饥饿的盛世：乾隆时代的得与夫", "cover": "51M6M87AXOL.jpg", "price": "99.62"},
  {"title": "焚天之怒第四卷至大结局", "cover": "51oIE7H5gnL.jpg", "price": "119.00"},
  {"title": "我就是风口", "cover": "51vzcX1U1FL.jpg", "price": "56.60"},
  {"title": "大宋的智慧", "cover": "517DW6EbhGL.jpg", "price": "5.06"}
];

class _CardFreeState extends BaseCardState {
  @override
  topTitle(String title) {
    return super.topTitle("免费听书馆");
  }

  @override
  subTitle(String title) {
    return super.subTitle("第 1800 期");
  }

  @override
  bottomContent() {
    return Expanded(
        child: Container(
      margin: EdgeInsets.only(top: 20),
      child: Column(
        children: <Widget>[
          //上方 小模块撑开布局
          Expanded(child: _bookList()),
          //下方按钮
          Padding(
            padding: EdgeInsets.only(bottom: 20),
            child: _bottomButton(),
          )
        ],
      ),
    ));
  }

  //书籍列表
  _bookList() {
    //实现网格布局
    return GridView.count(
      //设置网格布局 每行展示数量
      crossAxisCount: 2,
      //垂直间距
      mainAxisSpacing: 12,
      //水平间距
      crossAxisSpacing: 15,
      //纵横比
      childAspectRatio: 0.46,
      padding: EdgeInsets.only(left: 20, right: 20),
      children: BOOL_LIST.map((item) {
        return _item(item);
      }).toList(),
    );
  }

  //下方按钮控件
  _bottomButton() {
    //FractionallySizedBox 充满整个布局
    return FractionallySizedBox(
        widthFactor: 1,
        child: Padding(
          padding: EdgeInsets.only(left: 20, right: 20),
          child: RaisedButton(
              onPressed: () {},
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              padding: EdgeInsets.only(top: 10, bottom: 10),
              color: Colors.blue,
              child: Text("免费领取", style: TextStyle(color: Colors.white))),
        ));
  }

  Widget _item(Map<String, String> item) {
    return Container(
      child: Column(
        children: <Widget>[
          //使用绝对布局
          Stack(
            alignment: AlignmentDirectional.center,
            children: <Widget>[
              Image.network(
                  ''
                  'http://www.devio.org/io/flutter_beauty/book_cover/${item['cover']}',
                  fit: BoxFit.cover),
              Container(
                width: 30,
                height: 30,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.black38),
                child: Icon(Icons.play_arrow, color: Colors.white),
              ),
              //Positioned固定 控件
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.all(3),
                    decoration: BoxDecoration(color: Colors.black54),
                    child: Text(
                      "低价${item['price']}",
                      style: TextStyle(color: Colors.white, fontSize: 10),
                    ),
                  ))
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
            child: Text(
              item["title"],
              //设置 title只显示两行 多余部分 使用...省略
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }
}
